<template>
	<div>
		<bread-crumb refresh @actRefresh="getDataList">
			<template slot="title">员工佣金管理</template>
		</bread-crumb>

		<el-table :data="dataList" size="" v-loading="loading" border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column prop="name" label="成员名称"></el-table-column>
			<el-table-column prop="avatar" label="头像">
				<template  slot-scope="scope">
					<img :src="scope.row.avatar" alt="" width="40">
				</template>
			</el-table-column>
			<!--<el-table-column prop="gender" label="性别">-->
			<!--	<template slot-scope="scope">-->
			<!--		<span  class="333" v-if="scope.row.gender== 0">-</span>-->
			<!--		<span  class="333" v-if="scope.row.gender== 1">男</span>-->
			<!--		<span  class="333" v-if="scope.row.gender== 2">女</span>-->
			<!--	</template>-->
			<!--</el-table-column>-->
			<el-table-column prop="userId" label="user_id"></el-table-column>
			<el-table-column prop="mobile" label="mobile"></el-table-column>
			<!--<el-table-column prop="department" label="所属部门"></el-table-column>-->
			<!--<el-table-column prop="position" label="职位"></el-table-column>-->

			<el-table-column prop="money" label="当前佣金">
				<template>

				</template>
			</el-table-column>

			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="showDialogLayer(scope.row)">结算</el-button>
				</template>
			</el-table-column>

		</el-table>
		<div class="hidden-xs">
			<el-pagination background :pager-count="pagerCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
		</div>
		<div class="visible-xs">
			<el-pagination background :pager-count="pagerCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" layout="pager" :total="totalCount"></el-pagination>
		</div>

		<!--弹层-->
		<el-dialog title="结算" :visible.sync="visibleDialog" width="400px" >
			<div class="global-input-content">
				<div class="forms">
					<div class="row b c-red">操作对象：{{editingObject.name}}</div>
					<div class="row">
						<div class="title">金额</div>
						<input class="input main-input" type="text" v-model="submitData.amount" maxlength="15" />
					</div>
					<div class="row">
						<div class="title">备注</div>
						<input class="input main-input" type="text" v-model="submitData.remark" maxlength="100" />
					</div>
					<div class="row">
						<div class="title">行为</div>
						<el-radio v-model="submitData.act" label="increase">增加</el-radio>
						<el-radio v-model="submitData.act" label="subtract">减少</el-radio>
					</div>
				</div>
				<div class="btn-group mt10">
					<el-button  type="success" @click="actSubmit">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	apiUserMoneySettle,
	apiWxWorkExternalUserListOfUser,
	apiWxWorkUserList,
} from '@/axios/api.system';
import { mixins } from '@/mixins/mixins.global';
import { mixinUtils } from '@/mixins/mixins.utils';
import breadCrumb from '@/views/components/breadCrumb';
export default {
	name: 'userMoney',
	mixins:[mixins,mixinUtils],
	components:{breadCrumb},
	data() {
		return {
			visibleDialog:false,
			//原始值
			pagerCount: 5,//饿了么垃圾分页的页块显示
			page      : 1,
			pageSize  : 10,
			totalCount: 0,//总记录数
			//复杂值
			dataList: [],
			submitData :{
				amount: 0,
				act   : "increase",//加是increase，减是subtract
				remark: "",//
			}, //编辑中的对象
			editingObject :{}, //编辑中的对象
		}
	},
	mounted() {
	},
	methods:{

		//默认数据
		getDataList() {
			apiWxWorkUserList({
				pageSize: this.pageSize,
				page    : this.page,
			}).then(( res ) => {
				this.totalCount = res.count
				if (res.data.length > 0) {
					this.dataList = res.data
				} else {
					this.dataList = []
				}
			})
		},

		//默认显示的话层
		showDialogLayer(row){
			this.visibleDialog = true
			this.editingObject = {...row}

		},

		//提交
		actSubmit() {
			//参数处理
			let _amount = this.submitData.amount
			if(isNaN(_amount)){
				console.log('不是数字')
				return false
			}else if( _amount <= 0 ){
				console.log('不能小于等于0')
				return false
			}

			this.visibleDialog = false

			//提交
			apiUserMoneySettle({
				amount: _amount,
				act   : this.submitData.act,
				remark: this.submitData.remark,
				userId: this.editingObject.userId,

			}).then((res)=>{
				if(res.resultFlag==true){
					this.getDataList()
					this.notify(res.resultMsg,'success')
				}else{
					this.notify(res.resultMsg,'error')
				}
			})
		},



		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	},
	created() {
		this.getDataList()
	}

};
</script>

<style lang="less">

</style>
